<template>
  <div class="box" ref="targetElement">
    <div class="search-box" ref="searchBox">
      <div class="search-top-box">
        <div class="search-top-left-box">
          <el-form label-width="110px" ref="div" :inline="true" :model="formSearch" @submit.native.prevent
            class="demo-form-inline">
            <el-form-item label="采购类型">
              <el-select @change="onSearch(1)" filterable clearable v-model="formSearch.purchase_type"
                placeholder="选择售后单" class="form-width">
                <el-option label="项目集采" :value="1"></el-option>
                <el-option label="售后集采" :value="2"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目名称">
              <el-input @change="onSearch(1)" v-model="formSearch.project_name" placeholder="输入项目名称" clearable
                class="form-width"></el-input>
            </el-form-item>
            <el-form-item label="项目品牌">
              <el-select @change="onSearch(1)" filterable clearable v-model="formSearch.brand_id" placeholder="选择品牌"
                class="form-width">
                <el-option :label="item.name" :value="item.id" v-for="(item, index) in brandList" :key="index">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="项目编号">
              <el-input @change="onSearch(1)" v-model="formSearch.project_num" placeholder="输入项目编号" clearable
                class="form-width"></el-input>
            </el-form-item>
            <template v-if="moreSearchShow">
              <el-form-item label="项目类型">
                <el-select @change="onSearch(1)" filterable clearable v-model="formSearch.project_type"
                  placeholder="选择项目类型" class="form-width">
                  <el-option :label="item.store_type_name" :value="item.id" v-for="(item, index) in storeTypeList"
                    :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="下单时间">
                <el-date-picker range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="form-width"
                  @change="onSearch(1)" clearable v-model="formSearch.orderTime" value-format="yyyy-MM-dd"
                  type="daterange" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="期望到达时间">
                <el-date-picker range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="form-width"
                  @change="onSearch(1)" clearable v-model="formSearch.arrival_time" value-format="yyyy-MM-dd"
                  type="daterange" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="到货日期">
                <el-date-picker range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="form-width"
                  @change="onSearch(1)" clearable v-model="formSearch.actual_arrival_time" value-format="yyyy-MM-dd"
                  type="daterange" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="售后工单编号">
                <el-select @change="onSearch(1)" filterable clearable v-model="formSearch.after_sales_id"
                  placeholder="选择售后工单编号" class="form-width">
                  <el-option :label="item.after_sales_number" :value="item.id" v-for="(item, index) in afterSalesList"
                    :key="index"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品类型">
                <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.insurance_status" placeholder="选择保险类"
                  class="form-width">
                  <el-option label="是" :value="1">
                  </el-option>
                  <el-option label="否" :value="2">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品大类">
                <el-select @change="onSearch(1)" filterable clearable v-model="formSearch.product_type_id"
                  placeholder="选择产品大类" class="form-width">
                  <el-option :label="item.product_type_name" :value="item.Id" v-for="(item, index) in productType"
                    :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="产品规格">
                <el-select @change="onSearch(1)" filterable clearable v-model="formSearch.product_specs_id"
                  placeholder="选择产品规格" class="form-width">
                  <el-option :label="item.product_specs_name" :value="item.Id" v-for="(item, index) in productSpecs"
                    :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="采购供应商">
                <el-select @change="onSearch(1)" filterable clearable v-model="formSearch.supplier_id"
                  placeholder="选择供应商" class="form-width">
                  <el-option :label="item.supplier_name" :value="item.Id" v-for="(item, index) in supplierList"
                    :key="index">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="物流单号" prop="business_area_id">
                <el-input @change="onSearch(1)" v-model="formSearch.odd_numbers" placeholder="输入物流单号" clearable
                  class="form-width"></el-input>
              </el-form-item>
              <el-form-item label="结算状态">
                <el-select filterable @change="onSearch(1)" clearable v-model="formSearch.settlement_status" placeholder="选择结算状态"
                  class="form-width">
                  <el-option label="已结算" :value="1">
                  </el-option>
                  <el-option label="待结算" :value="2">
                  </el-option>
                  <el-option label="无需结算" :value="3">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="结算日期">
                <el-date-picker range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" class="form-width"
                  @change="onSearch(1)" clearable v-model="formSearch.endDate" value-format="yyyy-MM-dd"
                  type="daterange" placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
            </template>
          </el-form>
        </div>
        <div class="search-top-right-box">
          <p @click="moreSearchFunc">
            {{ moreSearchShow ? "收起" : "展开"
            }}<i :class="moreSearchShow ? 'el-icon-arrow-up' : 'el-icon-arrow-down'
              "></i>
          </p>
          <el-button type="primary" @click="onSearch(1)">查询</el-button>
          <el-button type="primary" @click="addFunc" v-if="$isPer(permission, ['purchase_add'])">新增采购订单</el-button>
        </div>
      </div>
    </div>
    <!-- table -->
    <div class="page-list" ref="pageList">
      <div class="list-top-box">
        <p class="list-top-box-left">
          已选<span class="num">{{ multipleSelection.length }}</span>/{{ tableData.length }}数据
        </p>
        <div class="list-top-box-right">
          <div class="list-top-box-right-left">
            <el-upload accept=".xlsx,.xls,.xml,.csv" action="#" :show-file-list="false" :auto-upload="false"
              :on-change="fileOnChangeFunc">
              <el-button style="margin-right: 10px;" type="primary"
                v-if="$isPer(permission, ['purchase_importPurchaseInfo'])">导入采购订单数据</el-button>
            </el-upload>
            <el-button type="primary" @click="exportPaymentOrderVisible = true" :disabled="tableData.length == 0"
              v-if="$isPer(permission, ['purchase_exportPurchaseInfo'])">导出采购订单数据</el-button>
            <el-button plain
              @click="$openUrlFunc('https://hzybucket.obs.cn-south-1.myhuaweicloud.com/common/20241258112558_17337147587808960.xlsx')"
              v-if="$isPer(permission, ['purchase_importPurchaseInfo'])">
              下载数据导入模板
            </el-button>
          </div>
          <el-button type="primary" :disabled="multipleSelection.length != 1" @click="addLogisticsFunc"
            v-if="$isPer(permission, ['purchase_edit'])">补充物流信息</el-button>
          <el-button type="primary"
            :disabled="multipleSelection.length != 1 || multipleSelection[0].settlement_status == 1" @click="editFunc"
            v-if="$isPer(permission, ['purchase_change'])">编辑</el-button>
          <el-button type="danger" plain :disabled="multipleSelection.length == 0" @click="delFunc"
            v-if="$isPer(permission, ['purchase_del'])">删除</el-button>
        </div>
      </div>
      <div class="table-box" v-loading="tableLoading">
        <el-table border ref="table" @row-click="handleHighlightChangeTable" highlight-selection-row :header-cell-style="{
          background: '#FAFBFC',
          color: '#828A9D',
          textAlign: 'center',
        }" :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData"
          @selection-change="handleSelectionChange" height="100%">
          <el-table-column type="selection" width="80"></el-table-column>
          <el-table-column min-width="140px" prop="" label="ID">
            <template slot-scope="scope">
              {{ $assemblyListNo('CGDD', scope.row.Id) }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_cglx')" min-width="120px" prop="purchase_type" label="采购类型"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.purchase_type == 1">项目采集</span>
              <span v-if="scope.row.purchase_type == 2">售后采集</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_xmmc')" min-width="180px" prop="project_name" label="项目名称"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.project_name || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_xmbh')" min-width="130px" prop="project_number" label="项目编号"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.project_number || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_xmpp')" min-width="120px" prop="brand_name" label="项目品牌"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <el-tag :color="`${scope.row.colour}`" style="color: #ffffff;">
                {{ scope.row.brand_name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_xmlx')" min-width="120px" prop="store_type_name" label="项目类型"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.store_type_name || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_shgdbh')" min-width="150px" prop="after_sales_number"
            label="售后工单编号" show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.purchase_type == 2 ? scope.row.after_sales_number : '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_cplx')" min-width="100px" prop="insurance_status" label="产品类型"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.insurance_status == 1">保险类</span>
              <span v-if="scope.row.insurance_status == 2">非保险类</span>
              <span v-if="!scope.row.insurance_status">--</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_cpdl')" min-width="130px" prop="product_type_name" label="产品大类"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.product_type_name || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_cpgg')" min-width="180px" prop="product_specs_name" label="产品规格"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.product_specs_name || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_cggys')" min-width="150px" prop="supplier_name" label="采购供应商"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.supplier_name || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_xdsl')" min-width="80px" prop="num" label="下单数量"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.num || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_xdsj')" min-width="120px" prop="order_time" label="下单时间"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.order_time || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_qwdhrq')" min-width="120px" prop="arrival_time" label="期望到货日期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.arrival_time || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_wldh')" min-width="180px" prop="odd_numbers" label="物流单号"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.odd_numbers || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_fhrq')" min-width="120px" prop="delivery_time" label="发货日期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.delivery_time || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_dhrq')" min-width="120px" prop="actual_arrival_time" label="到货日期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.actual_arrival_time || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_cgdj')" min-width="110px" prop="unit_price" label="采购单价"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.unit_price ? scope.row.unit_price + '元' : '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_cgzj')" min-width="110px" prop="total_price" label="采购总价"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.total_price ? scope.row.total_price + '元' : '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_jszt')" min-width="100px" prop="settlement_status" label="结算状态"
            show-overflow-tooltip>
            <template slot-scope="scope">
              <span v-if="scope.row.settlement_status == 1">已结算</span>
              <span v-if="scope.row.settlement_status == 2">待结算</span>
              <span v-if="scope.row.settlement_status == 3">无需结算</span>
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_jsrq')" min-width="120px" prop="settlement_time" label="结算日期"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.settlement_time || '--' }}
            </template>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_cjr')" min-width="120px" prop="user_name" label="创建人"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column v-if="$fieldShowFunc('cgdd_cjsj')" min-width="180px" prop="created_at" label="创建时间"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <div class="page-footer">
        <el-pagination class="el-pagination" @current-change="handleCurrentChange" :current-page="page" :page-size="num"
          @size-change="handleSizeChange" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 导出采购单 -->
    <el-dialog :modal-append-to-body="false" title="导出采购单字段选择" :visible.sync="exportPaymentOrderVisible" width="680px"
      :before-close="exportPaymentOrderCloseFunc">
      <el-checkbox class="checkbox-item" v-model="allChecked" @change="allCheckedChangeFunc">全选</el-checkbox>
      <div class="export-scroll" v-loading="exportPaymentOrderLoading">
        <el-checkbox-group v-model="exportPaymentOrderVal">
          <el-checkbox class="checkbox-item" v-for="(item, index) in exportPaymentOrderArr" :key="index"
            :label="item.label" border></el-checkbox>
        </el-checkbox-group>
      </div>
      <p v-if="exportPaymentOrderUrl">导出文件链接：<el-button @click="$openUrlFunc(exportPaymentOrderUrl[0])" type="text">{{
        exportPaymentOrderUrl[1]
          }}</el-button></p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="exportPaymentOrderSubmitFunc">提交</el-button>
        <el-button @click="exportPaymentOrderCloseFunc">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import commonApi from "@/api/common";
import { getUserInfo } from "@/utils/auth";
import purchaseApi from "@/api/purchaseApi";
import storeTypeApi from "@/api/storeTypeApi";
import brandApi from "@/api/brandApi";
import afterSalesApi from "@/api/afterSalesApi";
import { cgOrderListFieldArr } from '@/utils/exportField';
export default {
  name: "purchaseManagement",
  components: {},
  data() {
    return {
      tableLoading: false,
      userInfo: "",
      tableData: [],
      formSearch: {
        settlement_id: "",
        project_name: "",
        project_num: "",
        project_type: "",
        brand_id: "",
        after_sales_id: "",
        product_type_id: "",
        insurance_status: "",
        product_specs_id: "",
        supplier_id: "",
        start_time: "",
        end_time: "",
        start_arrival_time: "",
        end_arrival_time: "",
        start_actual_arrival_time: "",
        end_actual_arrival_time: "",
        odd_numbers: "",
        settlement_status: "",
        endDate: ""
      },
      moreSearchShow: false,
      page: 1,
      num: 10,
      total: 0,
      addLoading: false,
      multipleSelection: [],
      storeTypeList: [],//门店，项目类型列表
      brandList: [],//品牌列表
      afterSalesList: [],//售后单列表
      productType: [],//产品大类
      productSpecs: [],//产品规格
      supplierList: [],//供应商
      // 导出采购单
      exportPaymentOrderVisible: false,//导出弹窗显示
      exportPaymentOrderUrl: "",//导出链接
      exportPaymentOrderArr: cgOrderListFieldArr,//字段名列表
      exportPaymentOrderVal: [],//已选择字段
      allChecked: false,//是否全选字段
      exportPaymentOrderLoading: false,//导出loading
      permission: [],//操作权限
    };
  },
  watch: {},
  computed: {},
  activated() {
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    this.onSearch();
  },
  destroyed() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  deactivated() {
    window.removeEventListener('resize', this.handleResize);
    // 移除窗口大小变化事件监听器，防止内存泄漏
    if (this.resizeObserver) {
      // 停止观察目标元素，防止内存泄漏
      this.resizeObserver.disconnect();
    }
  },
  mounted() {
    this.handleResize();
    // 监听窗口大小变化事件
    window.addEventListener('resize', this.handleResize);
    // 操作权限
    this.$getHtmlAuthority(this.$route.path).then(res => {
      console.log(res, "getHtmlAuthority");
      this.permission = res.data.permission;
    })
    this.userInfo = getUserInfo();
    this.getPurchase();//采购订单列表
    this.getStoreTypeList();//门店类型
    this.getBrandList();//项目列表
    this.purchaseAfterSalesList();//售后单列表
    this.getProductType();//产品大类
    this.getProductSpecs();//产品规格
    this.getSupplier();//供应商列表
  },
  methods: {
    handleResize() {
      const target = this.$refs.targetElement;
      const searchBox = this.$refs.searchBox;
      const pageList = this.$refs.pageList;
      // 创建 ResizeObserver 实例
      const resizeObserver = new ResizeObserver(entries => {
        setTimeout(() => {
          console.log('元素变为:', searchBox.offsetHeight);
          // searchBox.offsetHeight + 'px'
          pageList.style.height = 'calc(100% - ' + (searchBox.offsetHeight + 15) + 'px)';
        }, 0);
      });
      // 开始观察目标元素
      resizeObserver.observe(target);

      // 存储 resizeObserver 实例，以便在组件销毁时停止观察
      this.resizeObserver = resizeObserver;
    },
    // --------------------------补充物流信息--------------------------
    addLogisticsFunc() {
      let multipleSelection = this.multipleSelection;
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: '/addLogistics',
        query: {
          id: multipleSelection[0].Id
        }
      })
    },
    // --------------------------编辑按钮--------------------------
    editFunc() {
      let multipleSelection = this.multipleSelection;
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: "/addPurchase",
        query: {
          id: multipleSelection[0].Id,
          route_title: '编辑采购订单'
        }
      })
    },
    // --------------------------删除按钮--------------------------
    delFunc() {
      let multipleSelection = this.multipleSelection;
      this.$confirm('此操作将删除已勾选订单, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let delete_arr = [];
        multipleSelection.forEach(item => {
          delete_arr.push(item.Id);
        })
        this.deletePurchase(delete_arr);
      }).catch(() => {
      });
    },
    // 删除
    deletePurchase(delete_arr) {
      purchaseApi.deletePurchase({ delete_arr }).then(res => {
        console.log(res, "删除采购单")
        if (res.code == 200) {
          this.onSearch();
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // --------------------------采购订单列表--------------------------
    getPurchase() {
      let formSearch = this.formSearch;
      this.tableLoading = true;
      purchaseApi.getPurchase({
        page: this.page,
        num: this.num,

        project_name: formSearch.project_name || "",
        project_num: formSearch.project_num || "",
        project_type: formSearch.project_type || "",
        brand_id: formSearch.brand_id || "",
        after_sales_id: formSearch.after_sales_id || "",
        purchase_type: formSearch.purchase_type || '',
        product_type_id: formSearch.product_type_id || "",
        insurance_status: formSearch.insurance_status || "",
        product_specs_id: formSearch.product_specs_id || "",
        supplier_id: formSearch.supplier_id || "",
        start_time: formSearch.orderTime ? formSearch.orderTime[0] : '',
        end_time: formSearch.orderTime ? formSearch.orderTime[1] : '',
        start_arrival_time: formSearch.arrival_time ? formSearch.arrival_time[0] : '',
        end_arrival_time: formSearch.arrival_time ? formSearch.arrival_time[1] : '',
        start_actual_arrival_time: formSearch.actual_arrival_time ? formSearch.actual_arrival_time[0] : '',
        end_actual_arrival_time: formSearch.actual_arrival_time ? formSearch.actual_arrival_time[1] : '',
        odd_numbers: formSearch.odd_numbers || "",
        settlement_status: formSearch.settlement_status || "",
        start_settlement_time: formSearch.endDate ? formSearch.endDate[0] : "",
        end_settlement_time: formSearch.endDate ? formSearch.endDate[1] : "",

      }).then(res => {
        console.log(res, "采购订单列表")
        this.tableLoading = false;
        if (res.code == 200) {
          this.tableData = res.data.list;
          this.total = res.data.max;
        }
      })
    },
    // ----------------------------table点击行-选中----------------------------
    handleHighlightChangeTable(row) {
      if (!row.disabled) {
        this.$refs.table.toggleRowSelection(row);
      }
    },
    // 单页数据量修改
    handleSizeChange(e) {
      this.num = e;
      this.onSearch(1);
    },
    // 页面权限
    getHtmlAuthority() {
      commonApi
        .getHtmlAuthority({
          path: this.$route.path,
        })
        .then((res) => {
          console.log(res, "页面权限");
          if (res.code == 200) {
            this.HtmlAuthority = res.data;
          }
        });
    },
    // 搜索
    onSearch(page) {
      this.page = typeof page == 'number' ? page : this.page;
      this.getPurchase();
    },
    // 门店类型（项目类型）列表
    getStoreTypeList() {
      storeTypeApi.getStoreTypeList({
        page: 1,
        num: 999
      }).then(res => {
        console.log(res, "门店类型（项目类型）列表")
        if (res.code == 200) {
          this.storeTypeList = res.data.list;
        }
      })
    },
    // 品牌列表
    getBrandList() {
      brandApi.getBrandList({
        page: 1,
        num: 999
      }).then(res => {
        console.log(res, "品牌列表")
        if (res.code == 200) {
          this.brandList = res.data.list;
        }
      })
    },
    // 售后单列表
    purchaseAfterSalesList() {
      commonApi.purchaseAfterSalesList().then(res => {
        console.log(res, "售后单列表")
        if (res.code == 200) {
          this.afterSalesList = res.data;
        }
      })
    },
    // 产品大类
    getProductType() {
      purchaseApi.getProductType({
        page: 1,
        num: 999
      }).then(res => {
        console.log(res, "产品大类")
        if (res.code == 200) {
          this.productType = res.data.list;
        }
      })
    },
    // 产品规格
    getProductSpecs() {
      purchaseApi.getProductSpecs({
        page: 1,
        num: 999
      }).then(res => {
        console.log(res, "产品规格")
        if (res.code == 200) {
          this.productSpecs = res.data.list;
        }
      })
    },
    // 供应商
    getSupplier() {
      purchaseApi.getSupplier({
        page: 1,
        num: 999
      }).then(res => {
        console.log(res, "供应商")
        if (res.code == 200) {
          this.supplierList = res.data.list;
        }
      })
    },
    // 导出采购单确认
    exportPaymentOrderSubmitFunc() {
      let exportPaymentOrderVal = this.exportPaymentOrderVal;
      if (!exportPaymentOrderVal.length) {
        this.$message({
          type: 'warning',
          message: "请勾选需要导出的字段"
        })
        return;
      }
      this.exportPurchaseInfo();
    },
    // 导出采购单取消
    exportPaymentOrderCloseFunc() {
      this.exportPaymentOrderVisible = false//导出弹窗显示
      this.exportPaymentOrderUrl = ""//导出链接
      this.exportPaymentOrderVal = []//已选择字段
      this.allChecked = false//是否全选字段
    },
    // 全选采购单字段
    allCheckedChangeFunc(e) {
      console.log(e)
      let exportPaymentOrderVal = [];
      let exportPaymentOrderArr = this.exportPaymentOrderArr;
      if (e) {
        exportPaymentOrderArr.forEach(item => {
          exportPaymentOrderVal.push(item.label);
        })
        this.exportPaymentOrderVal = exportPaymentOrderVal//已选择字段
      } else {
        this.exportPaymentOrderVal = exportPaymentOrderVal//已选择字段
      }
    },
    // 导出采购单
    exportPurchaseInfo() {
      let exportPaymentOrderVal = this.exportPaymentOrderVal;//已选择字段
      let exportPaymentOrderArr = this.exportPaymentOrderArr;//字段列表
      let formSearch = this.formSearch;
      let field_list = [];
      exportPaymentOrderVal.forEach(item => {
        let index = exportPaymentOrderArr.findIndex(i => {
          return item == i.label;
        })
        field_list.push(exportPaymentOrderArr[index].value);
      })
      this.exportPaymentOrderLoading = true;
      purchaseApi.exportPurchaseInfo({
        field_list,

        project_name: formSearch.project_name || "",
        project_num: formSearch.project_num || "",
        project_type: formSearch.project_type || "",
        brand_id: formSearch.brand_id || "",
        after_sales_id: formSearch.after_sales_id || "",
        purchase_type: formSearch.purchase_type || '',
        product_type_id: formSearch.product_type_id || "",
        insurance_status: formSearch.insurance_status || "",
        product_specs_id: formSearch.product_specs_id || "",
        supplier_id: formSearch.supplier_id || "",
        start_time: formSearch.orderTime ? formSearch.orderTime[0] : '',
        end_time: formSearch.orderTime ? formSearch.orderTime[1] : '',
        start_arrival_time: formSearch.arrival_time ? formSearch.arrival_time[0] : '',
        end_arrival_time: formSearch.arrival_time ? formSearch.arrival_time[1] : '',
        start_actual_arrival_time: formSearch.actual_arrival_time ? formSearch.actual_arrival_time[0] : '',
        end_actual_arrival_time: formSearch.actual_arrival_time ? formSearch.actual_arrival_time[1] : '',
        odd_numbers: formSearch.odd_numbers || "",
        settlement_status: formSearch.settlement_status || "",
        start_settlement_time: formSearch.endDate ? formSearch.endDate[0] : "",
        end_settlement_time: formSearch.endDate ? formSearch.endDate[1] : "",
      }).then(res => {
        console.log(res, "导出采购单")
        this.exportPaymentOrderLoading = false;
        if (res.code == 200) {
          this.exportPaymentOrderUrl = res.data;
        }
        this.$message({
          type: res.code == 200 ? 'success' : 'warning',
          message: res.message
        })
      })
    },
    // 导入采购数据选择文件
    fileOnChangeFunc(file) {
      let formdata = new FormData();
      formdata.append('excel_file', file.raw);
      purchaseApi.importPurchaseInfo(formdata).then(res => {
        console.log(res, "导入采购数据")
        if (res.code == 200 && !Array.isArray(res.data)) {
          this.getPurchase(1);
          this.$message({
            type: 'success',
            message: res.message
          })
        } else {
          this.$alert('修改标注：' + res.data[0], '提示', {
            confirmButtonText: '下载文件',
            callback: action => {
              if (action == 'confirm') {
                this.$openUrlFunc(res.data[0]);
              }
            }
          });
          this.$message({
            type: 'warning',
            message: '导入错误'
          })
        }
      })
    },
    // 翻页
    handleCurrentChange(page) {
      this.onSearch(page);
    },
    moreSearchFunc() {
      this.moreSearchShow = !this.moreSearchShow;
      this.$nextTick(() => {
        this.handleResize();
      })
    },
    addFunc() {
      this.$store.commit('isEventTriggeredFunc', true);
      this.$router.push({
        path: "/addPurchase",
        query: {
          route_title: '新增采购订单'
        }
      })
    },
    handleSelectionChange(e) {
      console.log(e);
      this.multipleSelection = e;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./index.scss";
@import '@/styles/listPage.scss';
</style>